<template>
    <main-layout>
        <div class="header">
            <div class="exhibition">
                <div class="out" @click="outOnline()">退出登录</div>

                <img :src="userList.src" >
                <div>{{ userList.userName }}</div>
            </div>
            <div class="news">
                <div @click="check()">动态</div>
                <div @click="choose()">书架</div>
            </div>
            <div class="show">
                <component :is="componentId"/>
            </div>
        </div>

    </main-layout>
</template>
<script>
 import MockService from "../../apis/Ajax";
import dynamic from './dynamic.vue';
import bookshelf from './bookshelf.vue'
import { Dialog } from 'vant'
    export default {
  components: { dynamic,bookshelf },
        data() {
            return {
                userList:{},
                componentId:'bookshelf'
            }
        },
        async created(){
            let userName=sessionStorage.getItem('userName')
            let result=await MockService.user(userName)
            if(result.code===200){
                this.userList=result.data
            }
        },
        methods:{
           
            check(){
                this.componentId = 'dynamic'
            },
            choose(){
                this.componentId = 'bookshelf'
            },
            outOnline(){
                Dialog.confirm({
                    title: '是否退出登录',
                    })
                    .then(() => {
                        sessionStorage.removeItem('userName')
                         localStorage.removeItem("auto-text");
                        this.$router.push("/login")
                    })
                    .catch(() => {
                    });
            }
        }
    }
</script>
<style lang="less" scoped>  
    .header{
        > .exhibition{
            width: 100%;
            height: 240px;
            text-align: center;
            background-color: hsl(234deg 21% 74%);
            border-bottom: 1px solid #cccedf;
            > img{
                    margin-top: 60px;
                    height: 100px;
                    width: 100px;
                    border-radius: 70px;
                    border: 3px solid #fff;
            }
            > div{
                margin-top: 10px;
                font-size: 20px;
                color: #fff;
            }
            > .out{
                margin-top: 0;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 16px;
            }
        }
        > .news{
            height: 80px;
            background-color: hsl(234deg 21% 74%);
            display: flex;
            > div{
                width: 50%;
                color: #e9eaf1;
                font-size: 20px;
                text-align: center;
                line-height: 80px;
            }
        }
        > .show{
            height: calc(100%-449px);
        }
    }
</style>